<!--搜索部件-->
<template>
    <div class="header_main">
      <header class="header">
        <img class="logo" src="static/img/logo.png" alt="logo">
        <label for="search" class="search">
          <input type="text" id="search" value="人皇纪">
        </label>
        <a class="user" href="javascript:;" @click="isLogin">
          <img v-if="!userInfo" src="../../../../static/img/user.png" alt="user">
          <img v-if="userInfo" :src="userInfo.userIcon" alt="user">
        </a>
      </header>
    </div>
</template>
<script>
import USER from '@/utils/user'
  export default {
    name: 'search',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        userInfo:null,
      }
    },
    created(){
      this.getLoginInfo();
    },
    methods:{
    getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
        var loginInfo = USER.getUserInfo();
        if(loginInfo.isLogin==0){ //0已登录 1未登录
         this.userInfo = loginInfo;
        }else{
          this.userInfo = null;
        }
      },
      isLogin(){
        //判断是否的登陆
        if(this.userInfo){ //登陆跳转到个人中心页面
          this.goToUserCenter();
        }else{ //未登录跳转到登陆页面
          this.goToLogin();
        }
      },
      goToLogin(){ //调整到登陆页面
        this.$router.push({ name: 'login'})
      },
      goToUserCenter(){ //跳转到个人中心
        this.$router.push({ name: 'usercenter'})
      },
    }
  }
</script>


<style>
  .header_main{
    height: 42px;
  }
  .header{
    width: 320px;
    height: 42px;
    background: #f60;
    position: fixed;
    z-index: 999;
    top:0;
  }
  .header .logo{
    height: 21px;
    margin: 10.5px 0 0 7px;
    float:left;
  }
  .search{
    display: block;
    float:left;
    width: 184px;
    height: 30px;
    margin: 6px 0 0 11.2px;
  }
  .search input{
    width: 184px;
    height: 30px;
    border:none;
    border-radius: 4px;
    color:#fff;
    text-indent: 30px;
    font-size:14px;
    background:#F69241 url(../../../../static/img/search2.png) no-repeat 10px center;
    background-size: 14px 14px;
    outline: none;
  }
  .user{
    display: block;
    float:left;
    overflow: hidden;
    border-radius:50%;
    width: 28px;
    height: 28px;
    margin:7px 0 0 7px;
  }
  .user img{
    width: 100%;
    height: 100%;
  }
</style>
